<template>
  <!--
   本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2588
   uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
   uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
   unicloud-db 组件文档：https://uniapp.dcloud.io/uniCloud/unicloud-db
   DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
   -->

  <view>
    <mSearch :mode="2" button="inside" :show="true" @search="search($event,3)"></mSearch>

    <!-- 基于 uni-list 的页面布局 -->
    <uni-list>
      <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
      <uni-list-item direction="column" v-for="item in data" :key="item.id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.title" >
        <!-- 通过header插槽定义列表的标题 -->
			<template v-slot:header>
			  <view class="uni-title" :style="item.shouldWarn?'color:red':''" @click="goView(item.id)">
					{{item.postName}}
					<uni-tag text="该交房租了" v-if="item.shouldWarn" style="margin-left: 10px;" type="error" :circle="true"></uni-tag>
			  </view>
			</template>
			<!-- 通过body插槽定义列表内容显示 -->
			<template v-slot:body>
			  <view class="uni-list-box">
			    <view class="uni-content">
			      <view class="uni-note">{{item.userName}}-{{item.nextChargeTime}} </view> 
			      <view class="uni-note">{{item.rentStart + ' 至 '+item.rentEnd}}</view>
			    </view>
			  </view>
			</template>
       
      </uni-list-item>
    </uni-list>
    <!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />

    <uni-load-more  />
  </view>
</template>

<script>
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
export default {

  components: {mSearch},
  data() {
    return {
      val0: '',
      val1: '',
      val2: '',
      val3: '',
      placeholder: '动态占位内容',
      model: {
        searchText: "",
        pageNum: 1,
        pageSize: 10
      },
      formData: {
        status: 'loading' // 加载状态
      },
      data:[],

      tipShow: false // 是否显示顶部提示框
    };
  },
  onShow(){
	  this.data = []
	  this.loadData()
  },
  onLoad() {
    // this.loadData()
  },
  methods: {
    search(e, val) {
      this.data = [];
      this.model.searchText = e;

      this.loadData();
    },


	  goView(id){
      console.log(id)
		  uni.navigateTo({
		    url: './edit?id=' + id,
		    events: {
		      // 监听修改页面成功修改数据后, 刷新当前页面数据
		      refreshData: () => {
            this.data = [];
		        this.loadData()
		      }
		    }
		  })
	  },
    loadData() {
      this.$u.api.order.list(this.model).then(res => {
        if(res.code == '200'){
          this.data.push(...res.rows);
        }else{
          this.$u.toast(res.msg);
        }
      });
    },
    load(data, ended) {
      if (ended) {
        this.formData.status = 'noMore'
      }
    },
    fabClick() {
      // 打开新增页面
      uni.navigateTo({
        url: './add',
        // events: {
        //   // 监听新增数据成功后, 刷新当前页面数据
        //   refreshData: () => {
        //     this.loadData()
        //   }
        // }
      })
    }
  },
  /**
   * 下拉刷新回调函数
   */
  onPullDownRefresh() {
    this.formData.status = 'more'
    this.$refs.udb.loadData({
      clear: true
    }, () => {
      this.tipShow = true
      clearTimeout(this.timer)
      this.timer = setTimeout(()=>{
        this.tipShow  = false
      },1000)
      uni.stopPullDownRefresh()
    })
  },
  /**
   * 上拉加载回调函数
   */
  onReachBottom() {

    this.model.pageNum ++ ;
    this.loadData();
  },

};
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';



page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f5f5;
  min-height: 100%;
  height: auto;
}

.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}

.content {
  width: 100%;
  display: flex;
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
